@import "../../../../assets/styles/variables";
.ss-platform-tabs {
  display: flex;flex: 1;flex-direction: column;
  &-wraper {display: flex;flex: 1}
  &-header {
    display: flex;
    span {
      flex: 1;border-left: 1px solid #ececec;border-bottom: 1px solid #ececec;height: 34px;line-height: 34px;
      background-color: #f9f9f9;text-align: center;box-sizing: border-box;cursor: pointer;
      &.current {background-color: #fff;border-bottom: 1px solid #fff;font-weight: 700;}
    }
  }
  &-body {
    flex: 1;overflow-y: auto;position: relative;
    .field-cell {
      dt {
        padding: 8px 0;
        strong {display: block;font-weight: 400;}
      }
      dd {
        .field-layout {
          border: 1px solid #ececec;
          .field-layout-horizontal, .field-layout-vertical {
            float: left;padding: 10px 0;width: 50%;text-align: center;cursor: pointer;
            .thumb {
              margin: 0 auto 8px;display: block;width: 90px;height: 20px;background-image: url(../../../../assets/img/element.svg);background-repeat: no-repeat;
            }
            &.current {
              background-color: #9ca1c4;color: #fff;font-weight: 700;
            }
          }
          .field-layout-horizontal {
            .thumb {
              background-position: 0 -124px;
            }
            &.current {
              .thumb {
                background-position: 0 -100px;
              }
            }
          }
          .field-layout-vertical {
            .thumb {
              background-position: 0 -172px;
            }
            &.current {
              .thumb {
                background-position: 0 -148px;
              }
            }
          }
        }
        .explain {color: #9f9f9f;}
        .set-item a { display: block;color: #008ed2 !important;}
        .ss-platform-input {font-size: 12px;}
        .ss-platform-choose-list {
          list-style: none;
          li {
            float: none;clear: both;width: 100%;box-sizing: border-box;
            &:last-child {margin-bottom: 0}
            label {cursor: pointer}
            cite {
              &.help {
                margin-left: 5px;cursor: help;
                @include ssicon();
                i {font-size: 12px}
              }
            }
          }
        }
        .ss-platform-user-list {
          margin-top: 10px;
          li {
            margin: 0 10px 10px 0;padding: 0 18px 0 0;height: 20px;line-height: 20px;box-sizing: border-box;
          }
          .user span {width: auto;max-width: 48px;height: 20px;line-height: 20px;font-size: 12px;}
          .ss-platform-btn-value-add {
            box-sizing: border-box;width: 20px;height: 20px;line-height: 20px;
            i {position: relative;left: .1px;line-height: 18px;font-size: 12px;}
          }
        }
      }
      dd * + .explain {padding-top: 5px;}
    }
    .field-cell + .field-cell, .field_cell dd + dd {
      margin-top: 10px;
    }

    .field-list {
      dl + dl {
        margin-top: 10px;
      }
      dt {
        padding: 8px 0;
        strong {display: block;font-weight: 400;}
      }
      ul {
        list-style: none;
        li {
          float: left;margin-bottom: 10px;padding-left: 22px;width: 48%;height: 30px;line-height: 30px;background-color: #f2f6ff;
          border: 1px solid #ececec;box-sizing: border-box;cursor: move;overflow: hidden;
          @include ssicon();
          &:nth-of-type(2n) {margin-left: 4%;}
          i {
            float: left;margin-left: -20px;top: 4px;width: 20px;height: 20px;line-height: 20px;color: #9da1c4;font-size: 12px;
          }
        }
      }
    }

    .empty {
      padding: 50px 0;text-align: center;
      p {color: #9f9f9f;}
    }

  }
}
